/*
 * @Author: kanglang
 * @Date: 2021-02-24 17:43:41
 * @LastEditors: zeki mini
 * @LastEditTime: 2021-05-27 10:33:01
 * @Description: 证件照
 */

import React from 'react';
import {
  View,
  StyleSheet,
  Image,
  Text,
  TouchableOpacity,
} from 'react-native';
import { iconSuccessGreen } from '@/images';
import { mainBgColorLightGray, px2dp, fontColorBlack, fontColorSecDeepGray } from '@/styles';

export default class CameraCard extends React.Component {
  onCatchImage = () => {
    const { type } = this.props;
    this.props.onCatchImage && this.props.onCatchImage(type);
  }

  render() {
    const { title, icon, bgImage } = this.props;
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        {icon ?
          <View>
            <TouchableOpacity
              style={styles.card}
              activeOpacity={0.8}
              onPress={this.onCatchImage}
            >
              <Image
                source={{ uri: icon }}
                resizeMode='stretch'
                style={styles.img}
              />
            </TouchableOpacity>
            <View style={styles.tipsBox}>
              <Text style={styles.desced}>{title}</Text>
              <Image
                source={iconSuccessGreen}
                resizeMode='stretch'
                style={styles.successIcon}
              />
            </View>
          </View> :
          <View>
            <TouchableOpacity
              style={styles.card}
              activeOpacity={0.8}
              onPress={this.onCatchImage}
            >
              <Image
                source={bgImage}
                resizeMode='stretch'
                style={styles.img}
              />
            </TouchableOpacity>
            <View style={styles.tipsBox}>
              <Text style={styles.desc}>{title}</Text>
            </View>
          </View>}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  card: {
    width: px2dp(330),
    height: px2dp(202),
    borderRadius: px2dp(14),
    marginTop: px2dp(32),
    backgroundColor: mainBgColorLightGray,
    justifyContent: 'center',
    alignItems: 'center',
    overflow: 'hidden'
  },
  cameraImg: {
    width: px2dp(85),
    height: px2dp(85),
  },
  img: {
    width: '100%',
    height: '100%',
  },
  desc: {
    fontSize: px2dp(26),
    color: fontColorSecDeepGray,
  },
  desced: {
    fontSize: px2dp(26),
    color: fontColorBlack,
  },
  slBox: {
    position: 'absolute',
    bottom: px2dp(16),
    right: px2dp(16),
    backgroundColor: 'rgba(0,0,0,0.4)',
    borderRadius: px2dp(6),
    paddingHorizontal: px2dp(8),
    paddingVertical: px2dp(3)
  },
  slText: {
    fontSize: px2dp(22),
    color: '#FFFFFF'
  },
  tipsBox: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    marginTop: px2dp(24),
  },
  successIcon: {
    width: px2dp(32),
    height: px2dp(32),
    marginLeft: px2dp(16)
  }
});
